<template>
	<div>
		<div class="button">
			<a-button type="primary" @click="addKefu" danger>添加</a-button>
		</div>
		<!--表格操作项目-->
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>名称</th>
					<th>类型</th>
					<th>是否显示</th>
					<th>排序</th>
					<th>操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in articleClassifyData" :key="index">
					<td>{{ item.name }}</td>
					<td>{{ item.type }}</td>
					<td>{{ item.show == 1 ? '显示' : '不显示' }}</td>
					<td>{{ item.sort }}</td>
					<td>
						<a-button type="primary" size="small" danger @click="articleDel(item.id)">删除</a-button>
						<a-button type="primary" size="small" class="m-l-10" @click="articleChange(item)">修改</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		<Alt ref="alts" @sureData="sureData"></Alt>
	</div>
</template>

<script>
	import Alt from './Childs/classChild.vue'
	import apiUser from '../../api/article.js'
	import storage from '../../storage/index.js'
	import {
		Modal
	} from "ant-design-vue";
	import apiArticl from "../../api/article";
	export default {
		components: {
			Alt,
		},
		data() {
			return {
				// 文章分类数据
				articleClassifyData: '',
				queryParams: {
					user_name: '',
					phone: '',
					type: '',
				},
			}
		},
		mounted() {
			this.articleClassifyList();
		},
		methods: {
			// 获取文章分类数据
			articleClassifyList() {
				apiUser.getCategorys().then((res) => {
					this.articleClassifyData = res.result
				})
			},
			// 打开面板
			addKefu() {
				this.$refs.alts.addOpen();
			},
			// 添加
			sureData(e) {
				apiUser.articleAdd(e).then((res) => {
					if (res.status === 1) {
						this.$message.success("操作成功");
						this.articleClassifyList()
					}
				});
			},
			// 删除
			articleDel(e) {
				let T = this
				Modal.confirm({
					title: () => '确定删除吗?',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						apiUser.delCategory({
							id: e
						}).then((res) => {
							if (res.status === 1) {
								T.$message.success("已删除");
								T.articleClassifyList()
							}
						})
					},
				});
			},
			//	修改
			articleChange(e) {
				storage.setItem('articForm', e);
				this.$refs.alts.articlForm(storage.getItem('articForm'))
			}
		},
	}
</script>

<style scoped>
	.button {
		display: flex;
		justify-content: right;
	}
</style>
